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Unit One 


% Websites: 


A Website is a webpage or more, connected with each other, with a certain 
name and Web address. The website can be visited on the computer or the 
cell phone. It is visited through a certain web address. 

% Web Page: 

It is a document with electronic content on the internet which can be shown 
through a web browser. 


% Home Page: 
It is the opening page in the website through which other pages can be visited. 


+ Components of the web page: 
The web page includes texts, images, audio files, videos and hyperlinks. 


% Static Web Page: 

The content of these pages is previously prepared by the page developer. The 
content doesn’t change and can’t be edited by the visitor. It is designed by 
HTML code. 


% Interactive Web Page: 
It is a webpage that has a content allowing the visitors to interact with and 


manipulate. This type is designed by HTML, JavaScript, PHP and others. 


% The First Stage: Planning 
Draw a simple diagram of the web pages of the website, the homepage and the 


connected pages 

- Decide the information and data to be included according to the need. 

% The Second Stage: Design the web page 

Design the format and shape of the homepage and other pages, the color, the 

background, the font size and type, place of putting text, images and video 
clips and decide the different hyperlinks inside the same page and connected 
with other pages in the website. 


% The Third stage: Prepare and develop: 
- Prepare the text using a text editor program and save it in a folder. 


- Prepare the image files, the video and sound files and save them in a 
folder. 


% The Fourth Stage: Implementation: 


Change the paper design into web page to be shown and visited on the internet 
with an internet browser program. 

- Input the data, text, images and videos. 

- Create the necessary hyperlinks to connect the different pages and facilitate 
browsing the site. This is done using HTML codes 


% The fifth Stage: Publish on the internet 


- Choose a title, select a web address, decide the storage capacity on a server 
and publish on the internet. 


Lesson 3: Create and Edit an Audio file (Audacity) 


+ "Audacity" program used to create and process audio files which is an open- 
source software, a program that can be run on different operating systems 
like (Windows —Linux) 


1- Preparing for collecting data: 
Type the data collected in one of the text editing programs and save them. 


2- -Preparation and processing of software and hardware components: 
= Make sure of the software components (install one of the programs of 


creating and audio processing.) 
= Make sure of the hardware components (connect microphone "Mic" to a 
computer.) 


1.Load a set-up of sound processing software. 

2.Click "Record" button to record voice. 

3. Insert text data by using the microphone. 

4.To finish recording, click " Stop" 

5.To listen to the audio Through the speakers, click " Play " 


1- Add an effect on the audio clip: 
- Drag the audio clip on the timeline. 


From "Effect" menu, select one of the desired effects (repeat — reverse - 


2-Cut and paste an audio clip 
1-Select the audio clip you want to cut. 


2-From "Edit" menu, Select "Cut" 

3- Move the pointer on the timeline to the desired place to paste the audio clip. 
4- From the "Edit" menu, select "Paste" 

3-Delete a section of the audio. 

Select the audio section you want to delete, press ''Delete" from the keyboard. 


1- From the File menu, select "Export Audio" 
2- Select the appropriate extension of the audio file. 


v Types of audio file extensions: 
Extensions differ in the quality and purity of sound and storage space. 


Characterized by the sound quality | Less purity 
and clarity 


Large storage capacity Less storage capacity 


Not appropriate for publication via | Appropriate for publication via 


websites. websites. 


OPenShot 


ns OpenShot Video Editor: is used to create and edit videos, enables the user 
to make a high quality video with images, backgrounds and audio files. 
- Video: set of fixed shots. 

Æ The interface consists of: 


1- Main Toolbar. 2- Project Files. 

3- Function Tab (Move — Images - Audio files) 
4- Preview Window. 

5- Edit Toolbar. 

6- Zoom Slider. 

7- Play head/Ruler. 

8- Timeline (Tracks) 


v Program Timeline: 


08:00:20 DE 0001.00 


1- Ruler (to show the time length on the timeline). 


2- Play Head (reads the current clip to show in Preview Window). 

3- Current Clip (image, sound or video). 

4-Tracks (They are similar to Layers where images, sounds or video put on the 
track. Unlimited number of tracks can be used in the project and the higher 
track has the priority to read, then the lower and so on.) 


v To create a video clip do the following: 
1- Import images to the program. 


2- Put the images on the program Timeline. 
3- Import a sound file to the program. 
4- Preview the video. 
1-Import image files into the program: 
- Click Import Files Icon + on the Main Toolbar or from File menu, choose 
Import Files 


2- Put Images in order on the Timeline: 
- Put all the images in Track path and put them in the suitable order. 


3- Import Sound files to make the video clip more attractive and effective: 
- Click Import Files Icon + on the Main Toolbar, and add the sound file to 
appear in “Project Files” tab, then drag it to the track. 

4- Preview the video 

- Click the Play icon in the Preview window. 
v Note - To add a new Track, click the Add Track icon + on the Edit Toolbar. 
v To save a video project, do the following: 

- Save all the used files, (images, sound, text) in a specific folder. 

1- Select "File" menu from menu bar. 

2- Choose “Save Project As” 

3- Name the project in English. 


v To control the time length of the video clip: 
1- Define the time length of the clip on the timeline, by dragging and dropping 


the head of the play indicator. 

2- Right click on the clip Track, select Slice Clip to split the clip into two 
slides. (Keep Both Slides or Keep the left slide or Keep the right slide) 

v Add Effect to a video Clip: 

1- Click the Effects tab. 

2- Drag and Drop an effect to add it to the clip. 

3- The effect sign appears on the clip. 

- To read the effect name put the cursor on the effect sign. 

- To delete the effect, right click the effect sign and select “Remove Effect”. 


v To add Transitions to a video clip: 
1- Click the Transitions tab 


2- Drag and drop one transition and add it to the clip. 
3- Add a transition at the beginning and at the end of the clip. 
4- Control the transition time length by drag and drop it to increase or decrease. 


v To add text to a video clip: 
1- From “Title” menu, select Title. 


2- Fill in the dialog box. Select template (Choose font and font color) 
3- Save text in a file. 

4- Name the text file in English. 

- The text file is found in “Project Files”. 

- Drag and drop the text file to a track. 


Notes: 
-The text can be added at the beginning, in the middle or at the end of the video 
clip. 
% To export a video to a file with suitable extension: 
1- From “File” menu, choose "Export Video". 
2- Select “File Name” and location (path). 
3-Extension of the Target video File (The difference between different 
extensions, MP4, AVI,..., according to size, quality and clarity.) 
4-Decide the Quality level. 
5-Export the video by pressing “Export Video”, 


Unit Two 


Create Web Pages by Using HTML 
HTML:(Hyper Text Markup Language) 


HTML:-It is a coding language used to create web pages which are used 
through an internet browser. 
HTML codes: called Tags. 


To create a web page using HTML tags, do as follows: 

- Create a text file using a text editor to write and edit the HTML tags. 
- Write the HTML tags between these signs “<” “ >”, 

- Write most of the tags with a start " < >" and an end " </>". 

- Save the text file with the HTML tags with.htm or .html extension 

- Open the saved file using a web browser. 

- Write HTML tags in capital or small letters. 

- Leave spaces between the words of the text. 

- Use the enter key to make new line in writing the text file. 


To create a web Page using HTML tags, take care of the following: 
Type <html> at the beginning of the tags to refer that the document is written 


in .html 

-The HTML tag is divided into two parts: 

1- head: the part where the page information is 
typed for the browser. 


address bar at the top of the page. 
2- body: the part where the content is written. 

text-image-video- hyperlink 
<body>...</body> tag. 

v Changing the direction of the web page using ''dir'' property 
When designing a web page with Arabic view, we have to change the direction 
of the page to make the content from right to left to suit the Arabic language 

<body dir = “rtl’’> Value Effect 


<body dir = “Itr’> Rtl From right to left 
Ltr From left to right 


x] First: Formatting the text in the web page: — 
1-Writing at the beginning of a new line b tag. : miiia 


g se . : </head> 
<br> tag: to start writing in a new line. <body dir="rt1"> 


halayi Agal 14 jal 


2- Centering the text b tag. oe 


e ` : </body> 
The text appears in the middle of the line. __ </html> 


3- Add blank space between words b 


When leaving any number of spaces between words in the file, the explorer 
will deal with it when viewing the page as one space. 


To control the number of spaces between words, we use the symbol &nbsp;. 
We repeat it according to the number of the needed spaces between words. 


Ex:- school &nbsp; &nbsp; &nbsp; &nbsp; site (School Site) 4 spaces 
4-a) Formatting the font in the web page b > tag: 


This tag has a group of properties. 


Property Function 

Face Choose the font type 

Color Choose the font color 

Size Choose the font size (The value from 1 to 7) 


Notes: 

- After using the close </font>, this finishes the effect of the tag on any text, 
what is written after that displays with the default shape. 
- In case, we don't use the <font> tag, the color face displays on the web page 
with the default face. 

4-b) Formatting the font in the web page: 


There are several Tags through which the font can be formatted. 


Tag Function Example 
<u> Underline <U> o j ghia g iishi g Alen is te </U> 
<b> Bold <i> o j ghia g iihi g ilaa iu pe </i> 


<i> Italic <b> o j ghia 5 ååh; g Alea iu ae </b> 
k] Second: Formatting the background of the web page. 
1- Selecting the background color for the web page by the property 


We use the property bgcolor that connects to the <body> tag to select the 
color of the web page background. 


<body bgcolor="green'"'> 


2- Adding image as a web page background by the property Background 


To add an image as a web page background, we use the property Background 
that relates to the <body> tag. 


<html> 
- Save image inside the same folder that is <head> 


. </head> 
saved in the web page. 


<body background="imagel.jpg"' > <body background="imagel.jpg" > 
(imagel is the name of the image. Jpg is the </body> 
image extension) </html> 


Dealing with images in the web pages: 


1- To insert image in the web page, we use 
Add image by the property src to <img> tag. 
< img sre = “School.jpg”> 

Important Notes: 


- Save image inside the same folder that is saved in the web page and write the 
image file name and its extension with the property src. 

- In case, there is a file image in another folder, we must write the complete 
path of the image file. 


Formatting the images in the web pages: 
The inserted image can be formatted by controlling the dimensions 


(height & width) and align it with the web page. 
We control the image dimension through the properties of the <img> tag 


- The property height. Ex. Height= "450" 
- The property width. Ex. Width= "800" 


We use the measurement unit "pixel" to measure the image dimensions. 
1- Controlling the image dimension: 

<img src="'school.jpg" height=""450" width="'800''> 

2- Align the image inside the web page 

The property Align to the <img> tag and the property has values: 


Value Function 
Right Align the image to the right 
Left Align the image to the left 
Middle | the text in the middle of the image Middle 
Bottom | The text is positioned align down the image 
Top The text is positioned align top the image Top 
<img sre = “school.jpg” Align = “Middle”> 


Dealing with the sound in the web page. 
We can insert the sound as a background to the web page to listen to when 
loading the web page by the browser by the tag 
</head> 
e "Internet Explorer" is the only browser that supports 
the <bgsound> tag. 
e The property src takes the sound file name and its > tats 
extension. 
+ Insert Video in the web page by <embed> tag and property Sre: 
e The <embed> tag supports the video file of the 
type (.swf - .avi - .mov). 
e The property sre takes the name of the video file 
and its extension (In case, we save the video file 
with the web page file in the same folder and we 
must write the complete video file path). 
$ Insert hyperlink in the web page by <a>...</a> tag and property href 
Hyperlink is a hyper image or a hypertext, connected to a title and when 
we click it, we move to this title and it can be in the same page or in 
another site. 


- The href property selects its value; the needed URL that we want to move 
to. 


<a href= "the needed address, we want to move to" > the text or image </a> 


1- Insert hyperlink text by the <a>...</a> tag . 


<html> 
<head> 
</head> 


<a href="http://www.moe.gov.eg" >Ministry of Education</a> 


The address of the Ministry Appears as a 


site that we want to move to hypertext in the 
browser 


<body > 
<a href="http: //www.moe. gov. eg" rpulsilly dy Ul 81 j9</a> 
</body> 


Hyperlink 
</html> 


2- Insert a hyperlink to an image 
To make a hyper image, we must follow: 


- Display the image by <img> tag. 
- Put <img> inside <a>...</a> to make it a hyperlink 


Remember 
Tag Function properties | values 
<html> Written at the beginning of the code to refer that the document 
is written by html. 
<head> The part where the page information is typed for the browser. 


<body> A place where we write Dir “rti” or “ltr” 
the content that will appear | bgcolor “any color” 
inside the web page 
Text — image — video - 
Hyperlink 

<title> Choose a title to the web page (appear on address bar) 

<br> Finishing the current line and start a new line 

<center> | To add a text in the middle of the line 

&nbsp; To insert a space between words in the browser 

<font> To control the font format | Face “Arial” “Andalus” 


background | “image 
name.extension”’ 


Color “Any color” 


size “from 1 to 7” 


Underline 
Bold 
Italic 


To display the image in the “image name. 
web page extension” 


Ex. “200” 
Ex. “300” 


Right — Left — Top — 
Middle - Bottom 


<bgsound> | To insert sound as a “Audio file 
background to the web name.extension” 


page 


<embed> | To add a video to the web “Video file 
page name.extension” 


<a> To create a hyperlink href “URL” 


General Revision 

Q1:Complete: (Homepage - static — interactive — webpage — websites) 
1- Webpage is an electronic document published on the internet, to be 
viewed through the internet browser programs. 
2 Homepage is the main page of website. 
3- interactive webpage displays content allows visitors to interact with them 
and deal with them. 
Q2: Choose the correct answer: 
1-Use of HTML, commands as well as other languages such as JavaScript and 

PHP in the design of webpages. 

(Homepage — website — interactive). 
is a webpage or more linked together under the given name. 
(Homepage - website — interactive) 
the main page of a website, through which is going 

for the rest of the webpages. (Homepage - website — interactive) 

4-Use of HTML commands in the design of 
(web page elements — website — static webpages) 
consists of a set of images, text, audio, video 

clips and hyperlinks.(Webpage elements — Program — Browser) 
6-Using a programming language and HTML commands are: 
a. Planning to build the site. b. Webpage design of the site 


a. The preparation and processing webpages. d. None of the above. 
7-Planning to build a website means: 
a. Drawing a simple sketch on paper for the pages of the site. 
b. The design of the form of the main pages. 
c. Determine the hyperlinks inside the main page. d. All of the above. 
d. Determine the hyperlinks inside the main page and the pages of the site 
in stage a. Implementation of webpages b. Publishing 
c. Web page design of the site d. Planning to build the site. 
is the first stage of design and create a website. 
a. Implementation of webpages b. Publishing 
c. Web page design of the site d.Planning to build the site. 
is the last stage of design and create a website. 
a. Implementation of webpages b. Publishing 
c. Web page design of the site d. Planning to build the site. 
display information to view only. 
a. Interactive webpages b. static webpages c. webpages 
11- An electronic document published on the internet to be 
viewed through the internet browser programs. 
a. Interactive webpages b. static webpages c. webpages 
is a webpage or more linked together 
under the given name. 
a. Interactive webpages b. Website c. webpage 
14- The use of HTML commands and other languages such as Java script 
and PHP in the design of: 
a. webpage elements b. website 
c. static webpage d. interactive webpage. 
are images, text, audio, video clips and hyperlinks. 
a. webpage elements b. website c. Interactive webpage. 
16- Audacity software which is used to create and process sound is 
characterized by: 
a. free software , open source b. runs on windows operating system , Linux. 
c. Easy interface in the deal. d. All the above. 
17- To run Audacity program: 
a. Click on start menu. b. Select audacity c. (A),(B) 
18- To cut audio clip: 


a. Select cut from edit menu. b. Select cut from file menu. 

c. Select view from edit menu. d. None of the above 

19- When choosing a slice clip, show the following options 

a. keep both sides b. keep left side 

c. keep right side d. all the above 

20- To delete the added effect on scene the video, right click on the effect 

icon, and select 

a. name b. effect tab c. remove effect 

Q3: put o) or (x): 

1-Website is an electronic document published on the internet, to be viewed 
through the internet browser program. (F) 

2-Home page is a webpage or more linked together under the given name. (F) 

3-Webpage elements are a set of images, Text, audio, video clips and 
hyperlinks. (T) 

4-Interactive webpage content remains constant doesn’t change and web page 
content is written by the page designer. (F) 

5- You can visit the website through a computer or mobile phone. (T) 

6-The implementation is the last stage of design and create a website. (F) 

7-We can prepare the images using a digital camera or mobile. (T) 

8-Convert the design into webpage are in the preparation and processing of 
webpages stage. (F) 

9-Planning to build a site is the second stage of design and create a website. (T) 

10- Planning to build a website that requires a sketch on paper for the site’s 
home page and the rest of the pages of the site. (T) 

11- Planning for build the site requires collecting data and information 
contained in each webpage. (T) 

12- Create hyperlinks between webpages are in the planning to build the site 
of webpages stage. (F) 

13- Programs of creating and processing audio files, contain set of tools that 
enable the user to create audio files is easy. (T) 

14- To create a text file we need sound processing program. (F) 

15- Audio file (mp3) is inappropriate for publication via websites. (F) 

16- Audio programs doesn’t allow the addition of different effects on audio 
clips. (F) 

17- (jpg, gif , bmp , png ) are the extension of audio files. (F) 


18- To see the remaining pages of the website click on hyperlink. (T) 

19-  http://www.openshot.org is a correct URL to download the openshot 
program. (T) 

20- You can save the audio file from the edit menu. (F) 

21- Internet browser is a program to display webpages. (T) 

22- Openshot is free closed source software. (F) 

23- Movie maker software is used to process video files, works through the 
operating system Linux. (F) 

24- To stop recording the sound in the Audacity program click on the (stop) 
button. (T) 

25- Openshot program works through the operating system windows and 
Linux. (T) 

26- Video clip is a set of fixed shots, when passes quickly, create a certain 
sense of visual movements. (T) 

Q4: Re-arrange the next stages to design and create a website: 

(2) Web page design of the site 

(3) Preparation and processing of webpages 

(1) Planning to build the site 

(5) The website publishing online 

(4) The stage of implementation of webpages. 

Q5: complete the following from between brackets: 

(WAV - delete — effect — file — MP3 — cut — Audacity ) 

1-Audacity software is characterized by the possibility of direct recording of 
the voice inside. 

2-To delete an audio clip, select the sound clip to be deleted then press delete 
on keyboard. 

3-Audio file extension (MP3), compact size (small storage). 

4-Audio file extension (WAV) a high quality and purity. 

5-To transfer a sound clip, select cut from edit menu. 


6-To export an audio clip, select export from file menu. 

7-To add the impact (Echo) to the clip of the sound, open effect menu. 
Q6: complete the following sentences: 

(Effect menu — homepage — text — reversal — static web pages) 

1. The impact of reversal reflects the beginning with end of the clip. 
2.To add the impact (reverse) to the clip sound, use Effect menu. 


3.Use of HTML commands in the design of static web pages. 

4. Homepage is the main page of website, through which is going for the rest 
of the webpages. 

5. Text from webpages elements. 

Q7: match 


A B 


1. Audacity program supports the extension (c ) a- video 


2. Webpages display information to view only b- planning to build the 
(e) site 


3. Webpages elements (d ) c- WAV , MP3 


4. The first stage of design and create a website (b) | d- Images, text and audio 


5. Is a set of fixed shots(a ) e- Static web page 


